<template>
<ul class="pagination" style="float:right">
  <li style="float: left;line-height: 30px;margin-right: 20px;">共{{this.totalResult}}条，当前页{{curSize}}/{{this.pageSize}}条</li>
  <li class="page-item disabled" v-if="nowPage <= 1">
    <a href="javascript:void(0);" class="page-link" title="上一页">&laquo;</a>
  </li>
  <li class="page-item" v-else>
    <a href="javascript:void(0);" class="page-link" v-on:click="$emit('go-page', nowPage - 1)" title="上一页">&laquo;</a>
  </li>
  <template v-if="totalPage >= linkCount">
  <li class="page-item" v-if="pageNum > 1">
    <a href="javascript:void(0);" class="page-link" v-on:click="$emit('go-page', 1)">1</a>
  </li>
  <li class="page-item disabled" v-if="pageNum > 2">
    <a class="page-link">...</a>
  </li>
  <template v-for="(i, index) in linkCount"> <template v-if="pageNum + i - 1 <= totalPage">
  <li :key="index" class="page-item active" v-if="nowPage == pageNum + i - 1">
    <a href="javascript:void(0);" class="page-link">
      {{nowPage}}<span class="sr-only">(current)</span>
    </a>
  </li>
  <li :key="index" class="page-item" v-else>
    <a href="javascript:void(0);" class="page-link" v-on:click="$emit('go-page', pageNum + i - 1)">{{pageNum + i - 1}}</a>
  </li>
  </template> </template>
  <li class="page-item disabled" v-if="pageNum + linkCount - 1 < totalPage">
    <a class="page-link">...</a>
  </li>
  <li class="page-item" v-if="pageNum + linkCount < totalPage">
    <a href="javascript:void(0);" class="page-link" v-on:click="$emit('go-page', totalPage)">{{totalPage}}</a>
  </li>
  <li class="page-item" v-else-if="pageNum + linkCount == totalPage">
    <a href="javascript:void(0);" class="page-link" v-on:click="$emit('go-page', totalPage)">{{totalPage}}</a>
  </li>
  </template>
  <template v-else> <template v-if="nowPage <= totalPage"> <template v-for="(i, index) in totalPage">
  <li :key="index" class="page-item active" v-if="nowPage == i">
    <a href="javascript:void(0);" class="page-link">
      {{nowPage}}<span class="sr-only">(current)</span>
    </a>
  </li>
  <li :key="index" class="page-item" v-else>
    <a href="javascript:void(0);" class="page-link" v-on:click="$emit('go-page', i)">{{i}}</a>
  </li>
  </template> </template> </template>
  <li class="page-item" v-if="nowPage < totalPage">
    <a href="javascript:void(0);" class="page-link" v-on:click="$emit('go-page', nowPage + 1)" title="下一页">&raquo;</a>
  </li>
  <li class="page-item disabled" v-else>
    <a href="javascript:void(0);" class="page-link" title="下一页">&raquo;</a>
  </li>
  <li class="turn">
    <div style="float:left;margin:0px 5px;">
      <input type="text" v-model="inputPage" class="form-control input-sm"
        style="width:30px;display:inline-block;margin: 0px 3px;text-align: center;padding: 3px;width: 40px;" />
      页
    </div>
  </li>
  <li>
    <button type="button" class="btn btn-default" v-on:click="$emit('go-page', inputPage)">确定</button>
  </li>
</ul>
</template>
<script>

export default {
	props: {
		nowPage: Number,
		pageSize: Number,
		totalPage: Number,
		totalResult: Number,
		linkCount: Number
	},
	data() {
		return {
			inputPage: 0
		}
	},
	watch: {
		nowPage: function(newPage) {
			this.inputPage = newPage;
		}
	},
	computed: {
		curSize() {
			var curSize = this.pageSize;
			if (this.nowPage == this.totalPage && this.totalResult != this.pageSize) {
				var size = this.totalResult%this.pageSize;
				if (size > 0) {
					curSize = size;
				}
			} else if (this.totalResult == 0) {
				curSize = 0;
			}
			return curSize;
		},
		pageNum() {
			var pageNum = 0;
			if (this.totalPage >= this.linkCount) {
				pageNum = Math.floor(this.nowPage-this.linkCount/2);
				if(pageNum + this.linkCount > this.totalPage){
					pageNum = this.totalPage - this.linkCount + 1;
				}
				if (pageNum <= 0) {
					pageNum = 1;
				}
			}
			return pageNum;
		}
	},
	created() {
		this.inputPage = this.nowPage;
	}
}
</script>